<section class="container" ng-init="$ctrl.init()">
  <div ng-repeat="msg in $ctrl.messages.items">
    <ul>
      <li class="row">
        <div class="col-sm-12">
          <img
            ng-if="msg.connection"
            ng-src="{{msg.connection.avatar}}"
            alt=""
          />
        </div>

        <div
          class="col-sm-12"
          ng-repeat="column in $ctrl.columns | orderBy:'priority' track by $index"
        >
          <mix-column-preview
            ng-if="column.name!='data_type' && column.name!='message'"
            model="msg.data[column.name]"
            column="column"
          ></mix-column-preview>
          <mix-column-preview
            ng-if="column.name!='data_type' && column.name=='message'"
            model="msg.data[column.name]"
            column="msg.msgField"
          ></mix-column-preview>
        </div>
      </li>
    </ul>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div ng-show="!$ctrl.user.loggedIn">
        <a class="btn btn-info" ng-click="$ctrl.login()">Login</a>
      </div>
      <form
        ng-show="$ctrl.user.loggedIn"
        ng-class="{'submitted': submitted}"
        ng-if="$ctrl.mixDatabaseData"
        ng-submit="$ctrl.submit()"
      >
        <div class="card">
          <div
            id="mixDatabaseId_{{$ctrl.mixDatabaseData.mixDatabaseId}}"
            class="card-body show"
          >
            <div class="row">
              <div class="col-md-12">
                <input type="checkbox" ng-model="$ctrl.request.isSave" />Save
                Data
              </div>
              <div class="col-sm-12">
                <select
                  class="form-control form-control-sm"
                  ng-model="$ctrl.msgField.dataType"
                  ng-change="$ctrl.updateDataType()"
                >
                  <option
                    ng-repeat="item in $ctrl.localizeSettings.dataTypes track by $index"
                    ng-value="item.value"
                  >
                    {{item.name}}
                  </option>
                </select>
                <div
                  ng-repeat="column in $ctrl.columns | orderBy:'priority' track by $index"
                >
                  <mix-column-editor
                    ng-if="column.name!='data_type' && column.name=='message'"
                    model="$ctrl.mixDatabaseData"
                    column="$ctrl.msgField"
                  ></mix-column-editor>
                  <mix-column-editor
                    ng-if="column.name!='data_type' && column.name!='message'"
                    model="$ctrl.mixDatabaseData"
                    column="column"
                  ></mix-column-editor>
                </div>
              </div>
              <div class="col-sm-12">
                <p
                  ng-repeat="err in $ctrl.errors"
                  class="text-danger"
                  ng-bind="err"
                ></p>
              </div>
            </div>
          </div>

          <div class="card-footer">
            <button
              type="button"
              ng-click="$ctrl.submit()"
              class="btn btn-sm btn-primary btn-round float-end px-4"
              ng-disabled="$ctrl.isBusy"
            >
              <span
                class="spinner-border spinner-border-sm"
                role="status"
                aria-hidden="true"
                ng-show="$ctrl.isBusy"
              ></span>
              <em class="fas fa-save" ng-if="!$ctrl.isBusy"></em> Submit
            </button>
          </div>
        </div>
      </form>
    </div>
    <div class="col-md-4">
      <ul>
        <li ng-repeat="m in $ctrl.members">
          <img alt="{{m.name}}" ng-src="{{m.avatar}}" />
          <span ng-bind="m.name"></span>
        </li>
      </ul>
    </div>
  </div>
</section>
<!-- /.content -->
